<template>
  <div>
    <div class="div">
      <el-button
        class="btn"
        type="info"
        size="small"
        v-show="isShow"
        @click="getAllDay"
      >
        开始对比数据</el-button
      >
      <el-button class="btn" type="primary" size="small"
        ><i class="el-icon-share"></i> 导入</el-button
      >
      <input
        class="input"
        type="file"
        ref="upload"
        accept=".xls, .xlsx"
        @change="readExcel($event)"
      />
    </div>
    <el-table :data="tableData" style="width: 100%" height="17rem">
      <template v-for="(col, index) in tableHead">
        <el-table-column
          :prop="col"
          :label="col"
          :key="index"
          align="center"
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
import XLSX from 'xlsx'
import { mapMutations } from 'vuex'
export default {
  name: 'Test',
  data() {
    return {
      isShow: false,
      tableData: [], //导入的excel数据
      tableHead: [], //表头
      allDay: {}, //以时间为属性名的所有单天的故障
    }
  },
  methods: {
    ...mapMutations(['update']),
    // 处理导入的excel时间格式
    // wps的excel的时间格式和计算机时间计算不一样，要做转换
    formaDate(oldDate) {
      let time = new Date(
        (oldDate - 25567) * 24 * 3600000 -
          5 * 60 * 1000 -
          43 * 1000 -
          24 * 3600000 -
          8 * 3600000
      )
      return this.$moment(time).format('YYYY-MM-DD')
    },
    // 导入excel文件
    readExcel(e) {
      //表格导入
      var that = this
      const files = e.target.files
      if (files.length <= 0) {
        //如果没有文件名
        return false
      } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
        this.$Message.error('上传格式不正确，请上传xls或者xlsx格式')
        return false
      }

      const fileReader = new FileReader()
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, {
            type: 'binary',
          })
          const wsname = workbook.SheetNames[0] //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]) //生成json表格内容
          // 循环遍历ws,让日期变为日期格式
          ws.forEach((ele) => {
            ele.日期 = that.formaDate(ele.日期)
          })
          // 每次新导出时必须清空数据
          that.tableData = [] //清空接收数据
          that.tableHead = []
          // 获取表头
          for (let item in ws[0]) {
            that.tableHead.push(item)
          }
          that.tableData = ws
          this.$refs.upload.value = ''
        } catch (e) {
          return false
        }
      }
      fileReader.readAsBinaryString(files[0])
      this.$message({
        type: 'success',
        message: '成功导入数据',
      })
      this.isShow = true
    },
    // 处理获取到的Excel文件，将他们按时间保存
    getAllDay() {
      let allDate = []
      // 循环遍历tableData，找到一个日期就将其保存（不能够重复）
      // 循环遍历整个tableDate
      // 每发现一个新的日期创建同名属性名，值为一个数组，并将该元素追加到当前数组中
      this.tableData.forEach((item) => {
        // 先遍历allDate中查找是否存在当前日期
        let res = allDate.some((ele) => {
          return item.日期 === ele
        })
        // 如果存在那么将该item追加到当前属性名的数组中
        if (res) {
          this.allDay[item.日期].push(item)
        }
        // 如果不存在则新增该属性名(日期)的数组，并追加该日期
        else {
          allDate.push(item.日期)
          this.allDay[item.日期] = []
          this.allDay[item.日期].push(item)
        }
      })
      // 将所有的日期进行保存之后，开始对比两天的数据
      console.log(this.allDay)
      this.contrastData()
    },
    // 每两天对比一次数据
    contrastData() {
      let keys = Reflect.ownKeys(this.allDay)
      // 如果第一个元素为不为时间，剔除
      if (keys[0] === '__ob__') {
        keys.shift()
      }
      let allObj = []
      for (let i = 0; i < keys.length; i++) {
        let prevDay = this.allDay[keys[i]]
        let nextDay = this.allDay[keys[i + 1]]
        if (prevDay && nextDay) {
          // 保存上一天的时间和下一天的时间,用于导出excel是做区分
          let prevDate = prevDay[0].日期
          let nextDate = nextDay[0].日期
          // 解决:由于故障名称可能发生重复，所以必须将部件作为前缀
          let tempPrev = []
          let tempNext = []
          // 如果上一天和下一天都有值进行数据对比
          if (prevDay && nextDay) {
            // 对比两天的数据哪里不一样
            prevDay.forEach((item) => {
              tempPrev.push(`${item.部件}${item.故障名称}`)
            })
            nextDay.forEach((item) => {
              tempNext.push(`${item.部件}${item.故障名称}`)
            })
            // 两层循环遍历两天的数据，找到不一样的部分
            // 下一天的和上一天的做对比，求下一天和上一天不一样的项
            let prev = new Set(tempPrev)
            let result = new Set(tempNext.filter((item) => !prev.has(item)))
            let newFault = [...result]
            // 将所有两天两天对比的的数据打包给导出界面
            let obj = {}
            obj.prev = tempPrev
            obj.next = tempNext
            obj.newAdd = newFault
            obj.prevDate = prevDate
            obj.nextDate = nextDate
            allObj.push(obj)
          }
        }
      }
      //  将数据传递给导出组件，调用导出组件上的导出方法
      //  调用vuex update的函数，修改值
      this.update({ allObj })
    },
  },
}
</script>
<style lang="css" scoped>
.div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
}
.btn {
  position: absolute;
  top: 1rem;
  right: 0;
  z-index: 1;
}
.btn:first-child {
  right: 100px;
}
.input {
  position: absolute;
  top: 1rem;
  right: 0;
  z-index: 999;
  opacity: 0;
  height: 1.5rem;
  cursor: pointer;
  width: 3.5rem;
}
/*滚动条的宽度*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
/*滚动条滑块*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>
